
<template>
	<view style="padding-bottom: 4vw;">	
		<view class="logo">
			<image class="img" src="../../static/logo.png" mode="widthFix"></image>
		</view>
		<view class="title_box">
			<view class="title">注册<view class="line"></view></view>
		</view>
		<view class="main_box">
			<!-- <view class="list">
				<view class="text iconfont22">&#xe60e;</view>
				<input type="text" v-model="username" placeholder="请输入您的账号" /> -->
			<!-- 	<button class="yzm" type="primary"
				open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber" style="z-index: 9999;color:#FFFFFF;background-color: #4d726f;" >获取本机号码</button> -->
		<!-- 	</view> -->
		<!-- 	<view class="list">
				<view class="text iconfont22">&#xe60e;</view>
				<input type="text" v-model="sm_name" placeholder="请输入您的真实姓名" />
			</view>
			<view class="list">
				<view class="text iconfont22">&#xe60e;</view>
				<input type="text" v-model="sm_card" placeholder="请输入您的身份证号" />
			</view> -->
			<view class="list">
				<view class="text iconfont22">&#xe60e;</view>
				<input type="text" v-model="phone" placeholder="请输入您的手机号" />
			</view>
			
			<view class="list">
				<view class="text iconfont22">&#xe63d;</view>
				<input type="text" v-model="code" placeholder="短信验证码" />
				<button class="yzm" @tap="getCode" style="z-index: 9999;;background-color: #4d726f;color:#FFFFFF;">{{countdown}}</button>
			</view>
			
			<view class="list">
				<view class="text iconfont22">&#xe62c;</view>
				<input type="password" v-model="pwd" placeholder="设置登录密码,长度6-20位" />
			</view>
			<view class="list">
				<view class="text iconfont22">&#xe62c;</view>
				<input type="password" v-model="pwd1" placeholder="请再次输入登录密码" />
			</view>
			<!-- <view class="list">
				<view class="text iconfont22">&#xe62c;</view>
				<input type="password" v-model="pwd2" placeholder="设置支付密码" />
			</view>
		 -->
			<view class="list">
				<view class="text iconfont22">&#xe647;</view>
				<input type="text" v-model="tj" placeholder="请输入邀请账号" />
			</view>
		</view>
<!-- 
		<view class="list">
			<input type="text" v-model="jd" placeholder="节点人推荐码" />
		</view> -->
	<!-- 	<view class="list">
			<checkbox style="scale: 0.8;" color="#4d726f" :checked="select" ></checkbox><view>我同意<text style="color: #999;">《会员服务协议》</text></view>
		</view> -->
	<!-- 	<button
			type="primary"
			open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber"
		>获取本机号码</button> -->
		<view class="but-color1" @tap="reg">注册</view>
		<radio-group class="tick_box" @tap="radioChange">
			<radio style="transform: scale(0.7)" value="1" color="#4d726f" :checked="tick" />
			<view class="text">
				我已经阅读并同意
				<span @tap="gotopage" :data-url="'/pages/notice/noticecontent?id='+yh">《用户协议》</span>
		<!-- 		及
				<span @tap="gotopage" :data-url="'/pages/notice/noticecontent?id='+ys">《隐私政策》</span> -->
			</view>
		</radio-group>
		<!-- <view class="forget" @tap="gotopage" data-url="/pages/public/login">登陆</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
		tick: false,
			select:true,
			username:'',
			phone:'',
			sm_name:'',
			sm_card:'',
			pwd:'',
			pwd1:'',
			pwd2:'',
			tj:'',
			tj1:'',
			jd:'',
			code:'',
			tip:'获取验证码',
			countdown: '获取验证码',
			disabled: false,
			timestatus: false,
			clear: '',
			menu:0,
			jsCode:'',
			openid:'',
			session_key:'',
			yh:'',
			ys:'',
		};
	},
	onLoad() {
		var that=this
		if(uni.getStorageSync('tj'))
		{
			that.tj=uni.getStorageSync('tj');
		}
		that.Net._get('ys',{},(res)=>{
			if(res.code ==1){
			
				that.yh=res.data.gg1.id
				//that.ys=res.data.gg2.id
			}
		});
		
	},
	methods: {
		radioChange(e) {
			//console.log(this.tick)
			this.tick = !this.tick;			
		},
	
		
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		setTick(){
			this.select = !this.select
		},
		reg() {
			var that = this;
			     
				if(!that.pwd  || !that.phone )
				{
					that.Msg.Fail('请输入完整信息');
					return
				}
				if(!that.tick)
				{
					that.Msg.Fail('请勾选用户协议');
					return
				}
				if(that.pwd1!=that.pwd)
				{
					that.Msg.Fail('2次密码不一致');
					return
				}
				if(!that.code)
				{
					that.Msg.Fail('请输入短信验证码');
					return
				}
				that.Net._get('register',{code:that.code,phone:that.phone,pwd:that.pwd,tj:that.tj,tj1:that.tj1,code:that.code,openid:that.openid},(res)=>{
					if(res.code ==1){
						that.Msg.Success('注册成功',()=>{
						that.Nav._to({url:'/pages/public/login',type:1})
						})
					}
				});
				// that.$api._post('login',{phone:that.phone},(res)=>{
				// uni.setStorageSync('user_id',res.data);
				// that.$api.showSuccess('登陆成功',(res)=>{
				// 							uni.reLaunch({
				// 							url: '../personalcenter/personalcenter'
				// 						})
				// });
				// });
			
		
		},
		backPage(){
			uni.reLaunch({
				url:'/pages/public/login'
			})
		},
		setNavMenu(e) {
			let index = e.currentTarget.dataset.index;
			this.menu = index;
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		// 获取验证码
		getCode() {
			var that = this;
			if(that.disabled)return
			if(!that.phone)
			{
				that.Msg.Fail('请填写手机号')
				return
			}
			that.disabled = true; //禁用点击
			that.countdown = 60;
			that.timestatus = true;
			that.clear = setInterval(that.countDown, 1000);
		    
			that.Net._get('code',{phone:that.phone,event:'reg'},(res)=>{
				if(res.code ==1){
					that.Msg.Success('发送成功')
				}
			});
		             
		},
		// 倒计时
		countDown() {
			var that = this;
			if (!that.countdown) {
				that.disabled = false;
				that.timestatus = false;
				that.countdown = '获取验证码';
				clearInterval(that.clear);
			} else {
				--that.countdown;
			}
		}
	}
};
</script>
<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	page{
		background-color:#FFFFFF;
	}
	.logo{
		width: 100%;
		text-align: center;
		padding-top: 3vw;
		.img{
			width: 16vw;
		}
	}
	.title_box{
		width: 100%;
		display: flex;
	}
	.tick_box {
		width: 80%;
		margin: 3vw auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tick_box .text {
		font-size: 3vw;
		color: #999;
	}
	.title{
		font-size: 5vw;
		color: #333;
		margin-top: 2vh;
		margin-bottom: 3vh;
		margin-left: 10vw;
		font-weight: bold;
		position: relative;
	}
	
	.title .line{
		width: 100%;
		height: 3vw;
		background-color: #4d726f;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
	}
	.forget{
		margin-top: 3vh;
		color: #999;
		text-align: center;
	}
	.main_box{
		width: 94%;
		background: #FFFFFF;
		border-radius: 15rpx;
		box-shadow: 0 0  10rpx #d6d6d6;
		padding: 60rpx 0;
		margin-left: 3%;
	}
	.list{
		width: 80vw;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 2vh;
		position: relative;
		border-bottom: 1px solid #E8E8E8;
		line-height: 100upx;
		text{
			margin-right: 5vw;
		}
		input{
			flex:1;
			height: 80upx;
			padding-left: 50upx;
		
		}
		.yzm{
			position: absolute;
			right: 10px;
			top:16upx;
			// border: 1px solid #4d726f;
			padding:0 30upx;
			line-height: 54upx;
			border-radius: 5px;
			color: #4d726f;
			font-size: 12px;
		}
	}
	.btn{
		width: 80vw;		
		background-color: #4d726f;
		border: none;
		color: #fff;
		text-align: center;
		margin: auto;
		margin-top: 10vh;
		padding: 10px 0px;
		border-radius: 5px;
	}
	
</style>
